{% extends "base.html" %}

{% block cssextend %}
    <style>
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            background-color: #fff;
            /*transition:width 2s;
            -webkit-transition:width 2s;*/
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            border-radius: 6px;
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            height: 60px;
            border-radius: 6px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
            background-color: #eee;
        }

        /*::-webkit-scrollbar:hover {
            width: 15px;
        }*/

        ::-webkit-scrollbar-thumb:hover {
            background-color: #ccc;
        }

        /* .nav-link.active {
            background-color: #38f !important;
        } */

        .statistic-chart-1 {
            position: relative;
        }
        .rs-select2--light.rs-select2--md {
            position: absolute;
            top: 30px;
            right: 12px;
            margin-top: 5px; /* 调整与 nav 的对齐 */
        }
    </style>
{% endblock %}
    
{% block content %}
    <!-- DATA TABLE-->
    <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--h3 class="title-5 m-b-35"></h3-->
                    <div class="table-data__tool">
                        <div class="table-data__tool-left" style="display: none">
                        </div>
                        <!--div class="table-data__tool-right">
                            <button class="au-btn au-btn-icon au-btn--blue au-btn--small">导出</button>
                        </div-->
                    </div>
                </div>
            </div>
            {% for field, field_data in rsi_extre.items %}
                {% if not forloop.counter|divisibleby:2 %}
                    <div class="row">
                {% endif %}
                <div class="col-lg-6" id="section-{{ field }}">
                    <!-- TOP CAMPAIGN-->
                    <div class="statistic-chart-1" style="padding-right: 20px;">
                        <ul class="nav nav-pills mb-3" role="tablist">
							<li class="nav-item">
								<a class="nav-link nav-title navtab" href="#section-{{ field }}" role="tab" group="{{ field }}" target="navtab-{{ field }}-d">日级{% if "dx" in field %}范围{% else %}历史{% endif %}{% if "max" in field %}最大值{% else %}最小值{% endif %}监控</a>
							</li>
							<li class="nav-item">
								<a class="nav-link nav-title navtab" href="#section-{{ field }}" role="tab" group="{{ field }}" target="navtab-{{ field }}-w">周级{% if "dx" in field %}范围{% else %}历史{% endif %}{% if "max" in field %}最大值{% else %}最小值{% endif %}监控</a>
							</li>
						</ul>
                        <div class="rs-select2--light rs-select2--md" >
                            <div class="navtab-{{ field }}-d">
                                <select class="js-select2 query-field" data-field="{{ field }}_date_d" name="time">
                                    {% for d in field_data.d.date_list %}
                                        <option {% if field_data.d.selected_date == d %} selected="selected" {% endif %} value="{{ d | date:'Y-m-d' }}">{{ d | date:'Y-m-d' }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2">
                                </div>
                            </div>
                            <div class="navtab-{{ field }}-w">
                                <select class="js-select2 query-field" data-field="{{ field }}_date_w" name="time">
                                    {% for d in field_data.w.date_list %}
                                        <option {% if field_data.w.selected_date == d %} selected="selected" {% endif %} value="{{ d | date:'Y-m-d' }}">{{ d | date:'Y-m-d' }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2">
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="table-responsive table-data" style="height: 360px">
                            <table class="table table-top-campaign navtab-{{ field }}-d">
                                <thead>
                                    <tr>
                                        <td>代码</td>
                                        <td>名称</td>
                                        <td>行业</td>
                                        <td>{% if "max" in field %}MAX{% else %}MIN{% endif %}D{% if "dx" in field %}X{% endif %}值</td>
                                        <td>{% if "max" in field %}MAX{% else %}MIN{% endif %}D{% if "dx" in field %}X{% endif %}日期</td>
                                        <td class="sortable-field" style="color: #666">最新RSI</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for stock_info in field_data.d.data %}
                                        <tr>
                                            <td>{{ stock_info.scode }}</td>
                                            <td>{{ stock_info.sname }}</td>
                                            <td class="filter-field">{{ stock_info.industry }}</td>
                                            <td style="color: {% if "max" in field %}#fa4251{% else %}#00ad5f{% endif %}">{{ stock_info.value|stringformat:".2f" }}</td>
                                            <td>{{ field_data.d.selected_date|date:"Y-m-d" }}</td>
                                            <td>{{ stock_info.lastest_rsi|stringformat:".2f" }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <table class="table table-top-campaign navtab-{{ field }}-w">
                                <thead>
                                    <tr>
                                        <td>代码</td>
                                        <td>名称</td>
                                        <td>行业</td>
                                        <td>{% if "max" in field %}MAX{% else %}MIN{% endif %}D{% if "dx" in field %}X{% endif %}值</td>
                                        <td>{% if "max" in field %}MAX{% else %}MIN{% endif %}D{% if "dx" in field %}X{% endif %}日期</td>
                                        <td class="sortable-field" style="color: #666">最新RSI</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for stock_info in field_data.w.data %}
                                        <tr>
                                            <td>{{ stock_info.scode }}</td>
                                            <td>{{ stock_info.sname }}</td>
                                            <td class="filter-field">{{ stock_info.industry }}</td>
                                            <td style="color: #fa4251">{{ stock_info.value|stringformat:".2f" }}</td>
                                            <td>{{ field_data.w.selected_date|date:"Y-m-d" }}</td>
                                            <td>{{ stock_info.lastest_rsi|stringformat:".2f" }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:2 %}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </section>
    <!-- END DATA TABLE-->
{% endblock %}


{% block jsscript %}
    <script>
        $(document).ready(function() {
            $('.query-field').change(function () {
                var query = {};
                var redirection = "/rsie/";

                $('.query-field').each(function() {
                    const fieldKey = $(this).data('field');
                    const selectedValue = $(this).val();
                    query[fieldKey] = selectedValue;
                });

                for (var field in query) {
                    if (redirection[redirection.length - 1] == '/') {
                        redirection += '?';
                    } else {
                        redirection += '&';
                    }
                    redirection += field + '=' + query[field]
                }
                return window.location = redirection;
            });

            var groups_list = [];
            // 初始化：默认显示每个group的第一个navtab对应的target
            $('.navtab').each(function() {
                var group = $(this).attr('group');
                groups_list.push(group);
            });

            // 点击事件处理
            $('.navtab').click(function(e) {
                e.preventDefault();

                var group = $(this).attr('group');
                var target = $(this).attr('target');
                
                window.localStorage.setItem('rsie:select:navtab:' + group, target);

                if (group == 'rsi_trend') {
                    loadRSITrendView();
                }

                // 移除同组navtab的title-2类，并隐藏对应的target
                $('.navtab[group="' + group + '"]').removeClass('title-2');
                $('.navtab[group="' + group + '"]').each(function (idx, object){
                    var hideTarget = $(object).attr('target');
                    $('.' + hideTarget).hide();
                })
                
                // 给当前点击的navtab添加title-2类，并显示对应的target
                $(this).addClass('title-2');
                $('.' + target).show();
            });

            for (var gid in groups_list){ 
                var group = groups_list[gid];
                var target = window.localStorage.getItem('rsie:select:navtab:' + group);
                var tab = $('.navtab[group="' + group + '"][target="' + target + '"]');
                if (target == null || tab.length == 0) {
                    $('.navtab[group="' + group + '"]').first().click();
                } else {
                    tab.click();
                }
            }
        });
    </script>
{% endblock %}